<template>
  <div>
    <div class='pds-tip'>
      <el-form :inline="true" class="filter">
        <el-form-item label="树类别:">
          <el-select v-model="typeId" placeholder="请选择类别" @change="getTree">
            <el-option v-for="item in typeList" :key="'type'+item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品小类:">
          <el-cascader :options="categoryList" :props="{value:'id'}" v-model="categoryId" @change="getTree" placeholder="请选择产品小类"></el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="7" style='margin-top:15px;margin-right:10px'>
        <el-card class="box-card">
          <div class="filter-container">
            <el-button-group>
              <el-button type="primary" v-if="menuManager_btn_add" icon="plus" @click="handlerAdd" :disabled="!(typeId&&categoryId.length)">添加根节点</el-button>
              <!-- <el-button type="primary" v-if="menuManager_btn_edit" icon="edit" @click="handlerEdit" >编辑</el-button> -->
              <el-button type='primary' v-if="menuManager_btn_add" icon="plus" @click="handlerAddSon" :disabled="!(typeId&&categoryId.length&&this.form.parentName)">添加子节点
              </el-button>
            </el-button-group>
          </div>
          <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all highlight-current
            node-key="id" :filter-node-method="filterNode" @node-click="getNodeData" ref="treeData">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="16" style='margin-top:15px;'>
        <el-card class="box-card">
          <el-form :label-position="labelPosition" :rules="rules" label-width="80px" :model="form" ref="form">
            <h3 v-if="formStatus == 'update'">pcc树节点编辑</h3>
            <h3 v-if="formStatus == 'create'">节点添加</h3>
            <el-form-item label="父类名称" v-if="form.parentName!=0">
              <span>{{form.parentName}}</span>
            </el-form-item>
            <el-form-item label="中文名称" prop="nameCn">
              <el-input v-model="form.nameCn" :disabled="formEdit" placeholder="请输入中文名称"></el-input>
            </el-form-item>
            <el-form-item label="英文名称" prop="nameEn">
              <el-input v-model="form.nameEn" :disabled="formEdit" placeholder="请输入英文名称"></el-input>
            </el-form-item>
            <el-form-item v-if="formStatus == 'create'">
              <el-button type="primary" @click="create">提交</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
            <el-form-item v-if="formStatus == 'update'">
              <el-button type="primary" @click="update">更新</el-button>
              <!-- <el-button type="danger" @click="delete">删除</el-button> -->
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import * as conApi from '@/api/product/config';
import * as baseApi from '@/api/product/index';
export default {
  data() {
    return {
      rules: {
        nameCn: {
          required: true,
          message: '请输入中文名称',
          trigger: 'blur'
        },
        nameEn: {
          required: true,
          message: '请输入英文名称',
          trigger: 'blur'
        }
      },
      typeList: [
        {
          id: 4,
          name: '电器件'
        },
        {
          id: 5,
          name: '结构件'
        },
        {
          id: 6,
          name: '控制要点'
        }
      ],
      typeId: null,
      categoryList: [],
      categoryId: [],
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      labelPosition: 'right',
      form: {
        parentId: undefined,
        nameCn: undefined,
        nameEn: undefined,
        type: 'authority_menu_menu'
      },
      currentId: -1,
      menuManager_btn_add: false,
      menuManager_btn_edit: false,
      menuManager_btn_eadd: false
    };
  },
  watch: {
    filterText(val) {
      this.$refs.treeData.filter(val);
    }
  },
  created() {
    this.menuManager_btn_add = this.elements['menuManager:btn_add'];
    this.menuManager_btn_edit = this.elements['menuManager:btn_edit'];
  },
  computed: {
    ...mapGetters(['elements'])
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.getCategoryList();
      this.typeId = null
      this.categoryId = []
      this.formEdit = true
      this.treeData = []
      this.form = {
        parentId: undefined,
        nameCn: undefined,
        nameEn: undefined,
        type: 'authority_menu_menu'
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /* 获取产品树 */
    getTree() {
      if (this.typeId && this.categoryId.length) {
        conApi.getConTree({
          type: this.typeId,
          productCategoryId: this.categoryId.slice(-1)[0]
        })
          .then(res => {
            this.treeData = res.data;
            console.log(res);
          });
      } else return;
    },
    /* 获取产品小类 */
    getCategoryList() {
      baseApi.getPdsConfCategoryTree().then(res => {
        this.categoryList = res.data;
        console.log(res);
      });
    },
    /* 获取单个节点信息 */
    getNodeData(item) {
      this.form = item;
      this.form.parentName = this.form.nameCn
      if (this.form.id) {
        this.formEdit = false;
        this.formStatus = 'update';
      }
      if (!this.formEdit) {
        this.formStatus = 'update';
      }
    },
    // 添加根节点
    handlerAdd() {
      this.resetForm();
      this.formEdit = false;
      this.formStatus = 'create';
    },
    // 添加子节点
    handlerAddSon() {
      this.sonForm();
      this.formEdit = false;
      this.formStatus = 'create';
    },
    // 修改
    update() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        this.form.type = this.typeId;
        this.form.productCategoryId = this.categoryId[
          this.categoryId.length - 1
        ];
        conApi.upsertCon(this.form).then(() => {
          this.getTree();
          this.$message({
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
        });
      });
    },
    delNode(id) {
      conApi
        .delCon({
          id
        })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.getTree();
          }
        });
    },
    // 提交
    create() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        this.form.type = this.typeId;
        this.form.productCategoryId = this.categoryId[
          this.categoryId.length - 1
        ];
        conApi.upsertCon(this.form).then(res => {
          this.getTree();
          if (res.code === 200) {
            this.$message({
              message: '创建成功',
              type: 'success'
            });
            return false;
          }
          this.$message({
            type: 'error',
            message: res.message
          });
        });
      });
    },
    onCancel() {
      this.formEdit = true;
      this.formStatus = '';
    },
    // 父节点添加传值
    resetForm() {
      this.form = {
        parentId: 0
      };
    },
    // 子节点添加传值
    sonForm() {
      const node = this.$refs.treeData.getCurrentNode();
      console.log(node);
      const parentName = this.form.parentName
      this.form = {
        parentId: node.id,
        cateLevel: ++node.cateLevel,
        parentName
      };
    }
  }
};
</script>
